<template>
  <div class="work-risk">
    <div class="title">施工作业质量风险</div>
    <div class="circle-box">
      <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="#1e90ff" stroke-width="12" fill="none"/>
        <circle cx="50" cy="50" r="40" stroke="#00e0ff" stroke-width="12" fill="none" stroke-dasharray="251.2" stroke-dashoffset="100"/>
      </svg>
      <div class="circle-text">0次</div>
    </div>
    <div class="legend">
      <div><span class="dot dot1"></span> 材料检测 30次 21.43%</div>
      <div><span class="dot dot2"></span> 施工工艺 85次 35.71%</div>
      <div><span class="dot dot3"></span> 其他专项检测 60次 42.86%</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorkRisk'
}
</script>

<style scoped>
.work-risk {
  background: rgba(20, 40, 60, 0.8);
  border-radius: 8px;
  color: #fff;
  padding: 16px;
  margin-bottom: 10px;
}
.title {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.circle-box {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 10px auto;
}
.circle-text {
  position: absolute;
  left: 0; right: 0; top: 38px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
}
.legend {
  margin-top: 10px;
  font-size: 0.95rem;
}
.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
}
.dot1 { background: #1e90ff; }
.dot2 { background: #00e0ff; }
.dot3 { background: #00ffae; }
</style>
